<script setup>
import {defineProps, reactive, ref} from "vue";

const props = defineProps({
  // 盒子宽
  width: {
    type: String,
    default: "750px",
    required: false
  },
  // 盒子高
  height: {
    type: String,
    default: "589px",
    required: false
  },
  // 小图的宽度
  smallImgWidth: {
    type: String,
    default: '135px',
    required: false
  },
  // 图片列表
  imgList: {
    type: Array,
    default: [],
    required: false
  }
})
const {width, height} = props;

// 激活的小图索引
let activeImgIndex = ref(0);

// 轮播dom对象
let carouselRef = ref(null);

// 容器的样式
const carouselStyle = reactive({
  width,
  height
})

// 小图点击
const imgClick = (index) => {
  console.log('点击的index=', index)
  activeImgIndex.value = index
}

/**
 *  箭头点击，滑动小图
 * @param type 箭头类型，left: 左箭头; right: 右箭头
 */
const arrowClick = (type) => {
  // 滑动的距离，小图父元素的宽
  let width = carouselRef.value.offsetWidth;
  let scrollDistance = width;
  scrollDistance = type === 'left' ? -scrollDistance : scrollDistance;
  console.log('移动的距离: ', scrollDistance)
  smoothScrollTo(carouselRef.value, scrollDistance, 'left')
}

/**
 * 平滑滚动-滚动高度累加
 * @param eleRef
 * @param scrollDistance
 * @param duration
 * @param direction 方向
 *
 */
const smoothScrollTo = (eleRef, scrollDistance, direction = 'top', ) => {
  // eleRef.scrollIntoView({ behavior: 'smooth', block: 'start' });
  // 或者使用下面的代码，支持更多的滚动选项
  // element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });

  // 如果需要每次滚动指定的高度，可以使用下面的代码
  eleRef.scrollBy({[direction]: scrollDistance, behavior: 'smooth'});
}

</script>

<template>
  <div class="container" :style="carouselStyle" v-if="imgList && imgList.length > 0">
    <div class="container-img">
      <img class="img" :src="imgList[activeImgIndex]" alt="">
    </div>
    <div class="container-carousel">
      <span class="arrow-left" @click="arrowClick('left')">
        <el-icon><ArrowLeftBold /></el-icon>
      </span>
      <span class="arrow-right" @click="arrowClick('right')">
        <el-icon><ArrowRightBold /></el-icon>
      </span>
      <div class="carousel" ref="carouselRef">
        <ul class="carousel-list">
          <li :class="['carousel-item', activeImgIndex === index ? 'active' : '']" @click="imgClick(index)" v-for="(item, index) of imgList"
              :style="{width: smallImgWidth, flex: `0 0 ${smallImgWidth}`}"
          >
            <img class="img" :src="item" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: inherit;
  height: inherit;

  // 大图
  .container-img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;

    .img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  // 轮播
  .container-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    height: 99px;

    // 左右箭头
    .arrow-left,
    .arrow-right {
      width: 40px;
      height: 100%;
      position: absolute;
      top: 0;
      background-color: rgba(56, 56, 56, 0.6);
      z-index: 999;
      cursor: pointer;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;

      &.arrow-left {
        left: 0;
      }

      &.arrow-right {
        right: 0;
      }
    }

    // 轮播元素
    .carousel {
      width: 100%;
      height: 99px;
      overflow-y: scroll;
      //background-color: pink;
      &::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
      }

      .carousel-list {
        display: flex;
        width: 100%;
        height: 99px;
        margin: 0;
        list-style-type: none;
        .carousel-item {

          //width: 135px;
          //flex: 0 0 135px;
          height: 100%;
          margin-right: 10px;
          cursor: pointer;
          border: 1px solid transparent;
          box-sizing: border-box;

          .img {
            width: 100%;
            height: 100%;
            display: block;
          }

          &.active {
            border: 1px solid yellow;
          }
        }
      }
    }

  }
}
</style>
